import { Canvas3d } from "@/shared/3d/Canvas3d"
import { InteractiveModel } from "@/shared/3d/InteractiveModel"
import { ReactNode, useState } from "react"
import { IModel } from "@/shared/interfaces"
import { OrbitControls } from "@react-three/drei"
import { useGetModelById } from "../model/useGetModelById"
import { UiSpinner } from "@/shared/Uikit/UiSpinner"


type InteractiveModelBlockProps = {
    modelId?: number,
    blockProps?: { modelId: number }
}

export default function InteractiveModelBlock(props: InteractiveModelBlockProps) {
    const modelId = props.modelId ? props.modelId : props.blockProps ? props.blockProps.modelId : 1
    const { model, isSuccess, isPending, errorMessage } = useGetModelById(modelId)

    return (
        <>
            <div className='w-full h-96 px-24 flex justify-center'>
                <div className='w-full h-full border border-black'>
                    {isSuccess && model &&
                        <Canvas3d className='w-full h-full'>
                            <ambientLight />
                            <OrbitControls />
                            <InteractiveModel model={model} />
                        </Canvas3d>
                    }
                    {isPending && <UiSpinner className='size-10' />}
                </div>

            </div>
        </>
    )
}
